<template>
  <div class="container">
    <div v-show="!showDetail">
      <!-- 搜索 -->
      <div>
        <table>
          <tr>
            <th style="width: 400px;">
              <span>场地类型名称：</span>
              <el-button
                @click="openFieldTypeList = true"
                type="text"
                style="width: 250px; text-align: left;"
              >
                <span v-if="fieldTypeSelect">{{fieldTypeSelect.type_name}}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th style="width: 100px;">
              <el-button type="primary" icon="el-icon-search" @click="searchFieldType">搜索</el-button>
            </th>
          </tr>
        </table>
        <!-- 场地类型筛选 -->
        <el-dialog title="选择场地类型" :visible.sync="openFieldTypeList">
          <el-input placeholder="请输入关键字" v-model="fieldTypeKeyword">
            <template slot="prepend">场地类型</template>
            <el-button slot="append" icon="el-icon-search" @click="getfieldTypeByKeyword"></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="fieldTypeSelect">
            <el-radio
              v-for="(fieldType, index) in fieldTypeList"
              :key="'fieldType' + index"
              :label="fieldType"
            >{{ fieldType.type_name }}</el-radio>
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="fieldTypeSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openFieldTypeList = false">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <br />
      <!-- 场地类型列表 -->
      <el-table
        :data="fieldTypeList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        stripe
        border
        @row-click="rowClick"
      >
        <el-table-column prop="id" label="场地类型编号" />
        <el-table-column prop="type_name" label="场地类型名称" />
        <el-table-column prop="english_name" label="英文名称" />
        <el-table-column prop="discription" label="场地类型描述" />
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        style="margin-left: 30%;"
      ></el-pagination>
    </div>
    <!-- 场地类型详情 -->
    <div v-show="showDetail">
      <fieldTypeDetails :fieldTypeDetails="fieldTypeDetails" @closeDetails="closeDetails" />
    </div>
  </div>
</template>
<script>
import fieldTypeDetails from "@/views/education-collegeField/field-type/details.vue";

export default {
  name: "fieldType",
  data() {
    return {
      tableTotal: 0,
      currentPage: 1,
      pagesize: 10,
      showDetail: false, //场地类型详情显示
      fieldTypeDetails: {}, //某一行场地类型的详情

      openFieldTypeList: false, //场地类型筛选对话框显示
      fieldTypeSelect: "", //选择的场地类型
      fieldTypeList: [], //场地类型列表
      fieldTypeKeyword: "", //关键词搜索场地类型
    };
  },
  components: {
    fieldTypeDetails,
  },
  created() {
    //获取所有场地类型
    this.getFieldTypeList();
  },
  methods: {
    //获取所有场地类型列表
    getFieldTypeList() {
      this.fieldTypeList = [
        {
          id: "01",
          type_name: "教学楼",
          english_name: "",
          discription: "",
          create_time: "",
        },
        {
          id: "02",
          type_name: "实验楼",
          english_name: "",
          discription: "",
          create_time: "",
        },
        {
          id: "03",
          type_name: "美术楼",
          english_name: "",
          discription: "",
          create_time: "",
        },
      ];
    },

    //条件搜索
    searchFieldType() {},

    //根据关键词搜索场地类型
    getfieldTypeByKeyword() {},

    //点击某一行，显示场地类型详情
    rowClick(val) {
      this.fieldTypeDetails = val;
      this.showDetail = true;
    },

    //关闭详情页
    closeDetails(val) {
      this.showDetail = val;
    },

    // 换页
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>
<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
</style>
